<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bag">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>所有商品</el-breadcrumb-item>
        <el-breadcrumb-item>宠物用品</el-breadcrumb-item>
        <el-breadcrumb-item>宠物用具</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-divider></el-divider>
    <!-- 商品参数 -->
    <div class="good">
      <!-- 左侧图片 -->
      <div class="goodImgs">
        <div class="bigImg">
          <img :src="goodsDetail.goodsImg" alt="" />
        </div>

        <div class="smallImg">
          <div v-for="(item, index) in smallImg" :key="index">
            <img :src="item" alt="" />
          </div>
        </div>
      </div>
      <!-- 右侧参数 -->
      <div class="goodParameter">
        <div class="good-title">{{ goodsDetail.title }}</div>

        <div style="display: flex; margin: 4% 0">
          <div class="types" v-for="(type, i) in goodsDetail.typeList" :key="i">
            <img src="../../static/d05.png" />
            <span>{{ type }}</span>
          </div>
        </div>

        <div class="alipay">
          <img src="../../static/d02.png" alt="" />
          <span>&nbsp;支付宝&nbsp;芝麻信用&nbsp;600分以上有机会减免押金</span>
        </div>

        <div class="firstMon" style="margin: 3% 0">首月租金1元</div>

        <div style="margin: 3% 0">
          48小时内发货&nbsp;/&nbsp;寄出包邮&nbsp;/&nbsp;归还包邮
        </div>

        <div class="price">
          <span>￥{{ goodsDetail.price }}/天</span>
          <span class="discount">券后￥{{ goodsDetail.price }}/天</span>
        </div>

        <div class="choose">
          <div class="choose-title">租赁套餐</div>
          <div>
            <span
              :class="['choose-item', index === active1 ? 'active' : '']"
              v-for="(item, index) in list1"
              :key="index"
              @click="meal(index, $event)"
              >{{ item }}</span
            >
          </div>
        </div>

        <div class="choose">
          <div class="choose-title">租期</div>
          <div>
            <span
              :class="['choose-item', index === active2 ? 'active' : '']"
              v-for="(item, index) in list2"
              :key="index"
              @click="lease(index)"
              >{{ item }}</span
            >
          </div>
        </div>

        <div class="choose">
          <div class="choose-title">颜色</div>
          <div>
            <span
              :class="['choose-item', index === active3 ? 'active' : '']"
              v-for="(item, index) in list3"
              :key="index"
              @click="color(index)"
              >{{ item }}</span
            >
          </div>
        </div>

        <div class="choose">
          <div class="choose-title">规格</div>
          <div>
            <span
              :class="['choose-item', index === active4 ? 'active' : '']"
              v-for="(item, index) in list4"
              :key="index"
              @click="spec(index)"
              >{{ item }}</span
            >
          </div>
        </div>

        <div>
          <div class="choose">数量</div>
          <div
            style="
              margin-top: 2%;
              -moz-user-select: none;
              -khtml-user-select: none;
              user-select: none;
            "
          >
            <span class="count-item" @click="add">+</span
            ><span>&nbsp;&nbsp;&nbsp;&nbsp;{{ count }}&nbsp;&nbsp;&nbsp;&nbsp;</span
            ><span class="count-item" @click="sub">-</span>
          </div>
        </div>

        <div class="flex">
          <div class="btn" style="margin-left: 0">立即租赁</div>
          <div class="btn">加入购物车</div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 标签页 -->
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品详情" name="first">商品详情</el-tab-pane>
        <el-tab-pane label="租赁说明" name="second">租赁说明</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    goodsDetail: {
      type: Object,
    },
  },
  data() {
    return {
      smallImg: [
        "../../static/iphone.jpg",
        "../../static/iphone.jpg",
        "../../static/iphone.jpg",
        "../../static/iphone.jpg",
        "../../static/iphone.jpg",
        "../../static/iphone.jpg",
        "../../static/iphone.jpg",
        "../../static/iphone.jpg",
      ],
      list1: ["租完归还/续租/买断", "租完即送"],
      list2: ["365", "1", "7", "30"],
      list3: ["白色", "红色", "红色", "红色", "红色", "红色", "红色", "红色"],
      list4: ["白色", "红色"],
      count: 1,
      active1: 0,
      active2: 0,
      active3: 0,
      active4: 0,
      count: 1,
      activeName: "first",
    };
  },
  mounted() {
    console.log(this.goodsDetail);
  },
  methods: {
    meal(index, $event) {
      console.log($event);
      this.active1 = index;
    },
    lease(index) {
      this.active2 = index;
    },
    color(index) {
      this.active3 = index;
    },
    spec(index) {
      this.active4 = index;
    },
    add() {
      this.count++;
    },
    sub() {
      if (this.count === 1) return;
      this.count--;
    },
    handleClick() {},
  },
};
</script>

<style scoped>
.container {
  width: 70%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 0.1rem;
  padding-top: 1.5%;
  margin-top: 0.2rem;
}
.bag {
  font-size: 0.13rem;
  font-weight: 600;
  margin-left: 5%;
  margin-bottom: 2%;
}
.good {
  padding-top: 1%;
  display: flex;
  margin-bottom: 2%;
}
.goodImgs,
.goodParameter {
  box-sizing: border-box;
  width: 50%;
  padding-right: 5%;
}
.goodImgs {
  padding: 0 5%;
}
.bigImg img {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.smallImg {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.smallImg div {
  width: 23%;
}
.smallImg img {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.good-title {
  font-size: 0.14rem;
  font-weight: 550;
  line-height: 0.15rem;
}
.alipay {
  background-color: rgb(137, 200, 211);
  padding: 2% 3%;
  border-radius: 0.1rem;
  color: #eee;
  font-weight: 550;
  font-size: 0.13rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 80%;
}
.alipay img {
  width: 4%;
  height: 4%;
}
.firstMon {
  padding: 2% 3%;
  color: #fff;
  background-color: #ff0000;
  border-radius: 0.1rem;
  display: inline-block;
}
.price span {
  display: inline-block;
  font-size: 0.14rem;
  padding: 2% 3%;
}
.discount {
  background-image: linear-gradient(
    to right,
    rgb(255, 224, 169),
    rgb(224, 185, 113)
  );
  color: rgb(138, 93, 40);
  border-radius: 0.1rem;
}
.choose {
  margin-top: 10%;
  font-weight: 550;
}
.choose span {
  display: inline-block;
  font-weight: 500;
}
.choose-item {
  padding: 1% 4%;
  border: 1px solid #999;
  margin-left: 2%;
  margin-top: 2%;
  border-radius: 0.1rem;
  color: #999;
  cursor: pointer;
}
.active {
  padding: 1% 4%;
  border: 1px solid #ff0000;
  margin-left: 2%;
  margin-top: 2%;
  border-radius: 0.1rem;
  color: #ff0000;
  cursor: pointer;
}
.count-item {
  color: #999;
  border-radius: 0.05rem;
  border: 1px solid #999;
  padding: 0 1%;
  cursor: pointer;
}
.tabs {
  padding: 0 5%;
}
</style>

<style>
.tabs .el-tabs__nav-wrap::after {
  background-color: #fff;
}
.tabs .el-tabs__active-bar {
  background-color: #ff0000;
}
.tabs .el-tabs__item.is-active {
  color: #ff0000;
}
.flex {
  display: flex;
  align-items: center;
  margin-top: 10%;
}
.btn {
  background-color: #ff0000;
  border-radius: 0.05rem;
  margin-left: 2%;
  padding: 1% 5%;
  color: #fff;
}
</style>